/*
 * @Description:
 * @Author: 胡涛
 * @Date: 2023-09-06 10:26:49
 * @LastEditors: 胡涛
 * @LastEditTime: 2023-10-17 22:05:58
 */

import { RuleObject } from "ant-design-vue/es/form/interface";
import { ref, reactive } from "vue";

type IFormPageOptions<TModel> = {
  formLayout?: {
    labelCol?: { span: number };
    labelAlign?: "right" | "left";
    wrapperCol?: { span: number };
  };
  rules?: Record<string, Array<RuleObject>>;
  model?: Partial<TModel>;
};

/**
 *
 * @returns
 */
export function useFormPage<TModel, TKey>(options?: IFormPageOptions<TModel>) {
  let model: TModel = reactive({} as any);

  /**
   * 表单布局方式
   */
  let formLayout = {
    labelCol: { span: 4 },
    labelAlign: "right",
    wrapperCol: { span: 18 },
  };

  /**
   * 验证规则
   */
  let rules: Record<string, Array<RuleObject>> = {};

  /**
   * 加载状态
   */
  let loading = ref(false);

  /**
   * 提交加载状态
   */
  let submitLoading = ref(false);

  if (options?.formLayout) {
    formLayout = Object.assign(formLayout, options.formLayout);
  }
  if (options?.rules) {
    rules = options.rules;
  }
  if (options?.model) {
    Object.assign(model, options.model);
  }

  return {
    model,
    rules,
    formLayout,
    loading,
    submitLoading,
  };
}
